<template>
	<app-dialog ref="dialog" width="70%" @confirm="save" bg="" :isFooter="false" :isClose="false">
		<view class="content">

			<view class="bg">
				<view class="title">今日观看广告及分享次数</view>
				<view class="neirong">
					<view class="item">
						<view class="item_left">
							<view ckass="title">观看广告（{{spNum}}/10）</view>
							<view class="hine">每次观看广告领取<text>20</text>积分</view>
						</view>
						<view class="item_right" v-if="spNum>0">
							<button @click="advert" class="upload_button">
								去观看
							</button>
						</view>
					</view>
					<view class="item">
						<view class="item_left">
							<view ckass="title">分享（{{fxNum}}/5）</view>
							<view class="hine">每次领取<text>20</text>积分</view>
						</view>
						<view class="item_right" v-if="fxNum>0">
							<button open-type="share" class="upload_button">
								去分享
							</button>
						</view>
					</view>
				</view>
				<view class="add_photo">
					<button @click="gbtc" class="add_photo_button">
						取消
					</button>
				</view>
			</view>
			<image class="close" @click="$refs.dialog.close()" :src="$imgUrl('/dialog_close.png')" mode="scaleToFill" />
		</view>
	</app-dialog>
</template>

<script>
	export default {
		components: {},

		data() {
			return {
				spNum: 0,
				fxNum: 0,
				text: 0,
			};
		},
	
		methods: {



			getHy() {
				this.$http.post('/app/getHy', {}).then(ress => {
					console.log(ress)
					this.spNum = ress.data.spNum,
						this.fxNum = ress.data.fxNum
				})
			},

			advert() {
				this.videoAd = wx.createRewardedVideoAd({
					adUnitId: "adunit-dbb0f41bc662c0e7" // 申请激励广告单元ID
				});
				this.videoAd.onError(err => {
					uni.showToast({
						title: '领取失败!',
						icon: 'none'
					});
					// console.log("err1", err)
				})
				this.videoAd.load()
					.then(() => this.videoAd.show())
					.catch(err => {
						uni.showToast({
							title: '领取失败!',
							icon: 'none'
						});
						// console.log("err2", err)
						this.videoAd.load()
							.then(() => this.videoAd.show())
					})
				this.videoAd.onClose(res => {
					console.log("res1", res);
					this.videoAd.offClose();
					// 用户点击了【关闭广告】按钮
					if ((res && res.isEnded) || res === undefined) {
						// 广告正常播放结束，业务逻辑
						console.log("广告正常播放结束")
						if (res.isEnded) {
							this.$http.post('/app/ai/aigg', {
								type: 0
							}).then(ress => {
								console.log(ress)
								this.spNum = this.spNum - 1
								uni.showToast({
									title: '领取成功!',
									icon: 'none'
								});
								this.$emit('gethy');
								this.$refs.dialog.close();
							})
						}
					} else {
						uni.showToast({
							title: '领取失败!',
							icon: 'none'
						});
						// 播放中途退出
						// console.log("播放中途退出")
					}
				})
			},


			valChange(e) {
				this.text = e.value
			},
			/**
			 * 打开弹框
			 */
			/**
	
		 */
			async open() {
				this.reset();

				// 打开弹框
				await this.$refs.dialog.open();
				console.log("11111111111")
				this.getHy();
			},
			async fxwc() {
				this.fxNum = this.fxNum - 1
			},

			async gbtc() {
				this.$refs.dialog.close();
			},
			reset() {},

			/**
			 * 保存
			 */
			async save() {
				try {
					///	this.$refs.dialog.close();
					//	this.hideLoading();
					console.log(this.text)
					this.$http.post('/app/dhmfxc', {
						num: this.text
					}).then(ress => {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						});
						this.$emit('gethy');
						this.$refs.dialog.close();
					})
				} catch (e) {
					this.errorLoading(e);
				}
			}
		},

	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.close {
		position: absolute;
		right: 3rpx;
		top: 30rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.bg {
		// background-image: url('../../static/image/my_code.png');
		background: url($imgUrl + "/my_code.png") no-repeat;
		background-size: 100% 100%;
		width: 700rpx;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		@include center();
		margin-top: 180rpx;
		color: #000;
		font-weight: bold;
		font-size: 40rpx;
		margin-left: 30rpx;
	}

	.input {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		width: 320rpx;
		padding: 14rpx 10rpx;
		margin-left: 40rpx;
		@include center();
	}

	.btn {
		margin-top: 60rpx;
		margin-left: 40rpx;
		@include btn($width: 340rpx);
	}

	.neirong {
		width: 70%;
		margin: 40rpx auto 0 128rpx;

		.item {
			display: flex;
			justify-content: space-between;
			background-color: #808480;
			align-items: center;
			color: #fff;
			margin-bottom: 30rpx;
			padding: 20rpx;

			&_left {
				.title {
					font-weight: bold;
					margin-bottom: 20rpx;
					font-size: 24rpx;
				}

				.hine {
					text {
						color: #c5560c;
						font-size: 24rpx;
					}
				}
			}

			&_right {
				.upload_button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 48rpx;
					font-family: PingFangSC;
					color: #ffffff;
					font-weight: 500;
					font-size: 24rpx;
					padding: 0;
					border-radius: 50px;
					background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
					border: none;
				}
			}
		}
	}

	.add_photo {
		width: 95%;
		// margin-top: 10rpx;
		margin-left: 45rpx;
	}

	.add_photo_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300rpx;
		height: 68rpx;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #4CAF50 0%, #009688 100%);
		border: none;
	}
</style>